﻿<!DOCTYPE html>
<html>
<head>
	<title>Steam官网</title>
	<style type="text/css">
		*{margin: 0;padding:0}
		li{list-style: none}
		a{text-decoration:none;}
		body{
			background-image: url(body2.png);
			
		}
		.head{
			background-color: #000;
			height: 80px;
		}
		.center{
			width:960px;
			margin:0 auto;
			position: relative;
		}
		#picture{
			padding-top:15px;
			position: absolute;
			left: 0px;
			top: 5px;
		}
		.about{
			margin-left: 200px;
		}
		.about li a{
			float: left;
			line-height: 80px;
			color:#aaa;
			margin-left: 5px;
		}
		.about li:hover a{
			color: #fff;
		}
		.langue li a{
			float: right;
			color:#aaa;
			margin-left: 5px; 

		}
		.langue li:hover a{
			color: #fff;
		}
		#lang{
			position: relative;
			padding-right: 15px;
		}
		.arrow-bottom{
			border-top:5px solid #b8b6b4;
			border-bottom:5px solid transparent;
			border-right:5px solid transparent;
			border-left:5px solid transparent;
			position: absolute;
			right: 0px;
			top: 10px;
		}
		#ol3{
			position: absolute;
			right:0px;
			top:20px;
			background-color: #000;
			width: 280px;
			display: none;
			z-index:1;
		}
		#ol3 li{
			color: #aaa;
			padding: 5px 5px;
			cursor: pointer;
			font-size: 12px;
		}
		#ol3 li:hover {
			color:#fff;
		}
		#shop{
			position: relative;
		}
		#ol1{
			position: absolute;
			left: 5px;
			top: 50px;
			background-color: #000;
			width: 80px;
			z-index:1;
		}
		#ol1 li{
			color: #aaa;
			padding: 5px 5px;
			display: none;
			cursor: pointer;
			
		}
		#ol1 li:hover {
			color:#fff;
		}
		#shop:hover #ol1 li{
			display: block;
		}
		#shequ{
			position: relative;
		}
		#ol2{
			position: absolute;
			left: 40px;
			top: 50px;
			background-color: #000;
			width: 80px;
			z-index:1;
		}
		#ol2 li{
			color: #aaa;
			padding: 5px 5px;
			display: none;
			cursor: pointer;	
		}
		#ol2 li:hover {
			color:#fff;
		}
		#shequ:hover #ol2 li{
			display: block;
		}
		#logo1{
			width: 100%;
			height: 330px;
			background-image:url(logo1.jpg);
			background-repeat:no-repeat;
			position: relative;
			background-size: 100%;
		}
		.clear{clear: both;}
		#case{
			width: 1000px;
			background-color:#1b16d4;
			opacity: .9;
			position: absolute;
			top: 20px;
		}
		#case > li{
			float: left;
			line-height: 30px;
			border-right: 1px solid #000;
			padding-left: 10px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-right: 30px;
		}
		#case li:hover {
			background-color: #ecebf2;
		}
		#case li:hover #down{
			background-color: #d7d6f3;
			display: block;
		}
		#case li a{
			color: #eee;
			cursor: pointer;
		}
		#case li:hover a{
			color: #04040e;
		}
		#input{
			margin-top: 10px;
			float: right;
			background-color:#333;
			opacity: .5;
			height: 30px;
			border:1px solid #000;
			color: #fff;
			position: relative;
			font-style:italic
		}
		#btn{
			position: absolute;
			top:13px;
			right: 0px;
		}
		#input:hover{
			border:1px solid blue;
		}
		#shopp{
			position: relative;
		}
		.sarrow-bottom{
			border-top:5px solid #b8b6b4;
			border-bottom:5px solid transparent;
			border-right:5px solid transparent;
			border-left:5px solid transparent;
			position: absolute;
			right: 0px;
			top: 25px;
			margin-right: 10px;
		}
		#shoping{
			position:relative;
		}
		#down{
			position:absolute;
			width: 120px;
			top: 50px;
			left: 0px;
			padding: 5px 5px;
			display: none;
		}
		#down .div{
			border-bottom:1px solid #fff;
			margin-bottom: 5px;
			margin-top: 5px;
		}
		#down li:hover {
			background-color: blue;
		}
		#down li:hover a{
			color: #fff;
		}
		.adv > h2{
			font-weight: normal;
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;
		}
		.list{
			width: 100%;
			height: 353px;
			box-shadow: 0 0 10px #000;
		}
		.adv{
			position: relative;
			padding-top: 20px;
		}
		.prev,.next{
			width: 23px;
			height: 36px;
			background-image:url(arrows.png);
			position: absolute;
			top: 45%;
			cursor: pointer;
		}
		.prev{
			left: -30px;
			background-position: 23px 0;
		}

		.next{
			right: -30px;
		}
		.right > h2{
			font-weight: normal;
			font-size: 24px;
			color: #fff;
			padding-bottom: 5px;
			line-height: 25px;
			padding-left: 20px;
			height: 50px;
			margin-top: 10px;
		}
		.list .left{
			float: left;
			width: 600px;
			height: 338px;
		}
		.list .right{
			float: right;
			width: 360px;
			height: 353px;
			background-image: url(01.jpg);
			position: relative;
		}
		.imglist img{
			float: left;
			width: 170px;
			height: 80px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.right > h3{
			padding-left: 10px;
			color: #fff;
			font-weight: normal;
			margin:20px 0;
			font-size: 24px;
		}
		.right{
			position: relative;
		}
		.money{
			font-size: 14px;
			color: #fff;
			position: absolute;
			left: 10px;
			bottom: 10px;
		}
		.images{
			position: absolute;
			right: 0px;
			bottom: 5px;
			float: left;
		}
		.images img{
			width: 20px;
			height: 20px;
			display: none;

		}
		.money .discount{
			color: #a4b007;
			background: #4c6b22;
		}
		.money .original{
			text-decoration: line-through;
			color: #7193a6;
		}
		.team{
			display: none;
		}
		#copy{
			display: none;
		}
		.dot{
			position: absolute;
			left: 35%;
			bottom:-30px;
		}
		.dot .color{
			width: 15px;
			height: 8px;
			float: left;
			background-color: #facfaa;
			cursor:pointer;
			margin-right: 10px;
			opacity: .5;
		}
		#dotli{
			background-color:red;
		}
		#promo{
			position: absolute;
			left: -240px;
			top:0px;
			
		}
		#promo img{
			width: 210px;
		}
		#card li{
			line-height: 16px;
			margin-bottom: 5px;
		}
		#card  a{
			font-size: 13px;
			color: #807bef;
		}
		#card li:hover a{
			color: #f4f4fb;
		}
		#card .symbol{
			color: #e3e3ee;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		#card .symbol{
			font-size: 12px;
		}
		#aa1{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
		}
		#aa2{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -16px;
		}
		#aa3{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -32px;
		}
		#aa4{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -48px;
		}
		#aa5{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -64px;
		}		
		#aa6{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -80px;
		}
		#aa7{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -96px;
		}
		#aa8{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -112px;
		}
		#aa9{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -128px;
		}
		#aa10{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -144px;
		}
		#aa11{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -160px;
		}
		#aa12{
			width: 16px;
			height: 16px;
			background-image:url(stores.png);
			float: left;
			margin-right: 5px;
			background-position: -176px;
		}
		.notice{
			display: none;
		}
		.gamehover{
			width: 300px;
			margin-left: 200px;
			background-color: #eee;
			position: absolute;
			right:-300px;
			top: 50px;
			display: none;
			z-index: 100;
		}
		.gamestart{
			padding:12px;
			font-size:14px;
		}
		.gamestart  h2{
			font-weight: normal;
			font-size:16px;
			color: #222;
		}
		.gamestart  p{
			font-size:14px;
			color: #222;
		}
		.gamestart .IMG{
			width:275px;
			height: 130px;
			overflow: hidden;
		}
		.gameover .fail{
			background-color: #aaa;
			border-radius: 2px;
			margin-bottom: 10px;
		}
		.gameover .fail li{
			line-height:20px;
			color: #ddd;
		}
		.fail li .good{
			color: blue;
		}
		.gameover .ucba li{
			float: left;
			margin-right: 3px;
			margin-bottom: 3px;
			background-color: #aaa;
			color: #ddd;
			border-radius: 2px;
		}
		.gameover p{
			margin-bottom: 5px;
		}
		.arrow-left{
			border-top:10px solid transparent;
			border-bottom:10px solid transparent;
			border-right:10px solid #eee;
			border-left:10px solid transparent;
			position: absolute;
			left: -20px;
			top: 20px;
		} 


		


		
		

	</style>
</head>
<body>
	<div class="head">
		<div class="center">
			<div class="head-left">
				<div id="picture"><img src="logo.png"></div>
				<ul class="about">
					<li id="shop">
						<a href="#">商店</a>
						<ol id="ol1">
							<li>精选</li>
							<li>探索</li>
							<li>鉴赏家</li>
							<li>愿望单</li>
							<li>新闻</li>
							<li>统计</li>
						</ol>
					</li>
					<li id="shequ">
						<a href="#">社区</a>
						<ol id="ol2">
							<li>主页</li>
							<li>讨论</li>
							<li>创意工坊</li>
							<li>市场</li>
							<li>实况直播</li>
						</ol>
					</li>
					<li><a href="">关于</a></li>
					<li><a href="">客服</a></li>
				</ul>
			</div>
			<div class="head-right">
				<ul class="langue">
					<li >
						<a href="#" id="lang">语言</a>
						<span class="arrow-bottom"></span>
						<ol id="ol3">
							<li>簡體中文</li>
							<li>日本語（日文）</li>
							<li>한국어（韓文）</li>
							<li>ไทย（泰文）</li>
							<li>Български（保加利亞文）</li>
							<li>Čeština（捷克文）</li>
							<li>Dansk（丹麥文）</li>
							<li>Deutsch（德文）</li>
							<li>English（英文）</li>
							<li>Español - España（西班牙文 - 西班牙）</li>
							<li>Español - Latinoamérica（西班牙文 - 拉丁美洲）</li>
							<li>Ελληνικά（希臘文）</li>
							<li>Français（法文）</li>
							<li>Italiano（義大利文）</li>
							<li>Magyar（匈牙利文）</li>
							<li>Nederlands（荷蘭文）</li>
							<li>Norsk（挪威文）</li>
							<li>Polski（波蘭文）</li>
							<li>Português（葡萄牙文）</li>
							<li>Português - Brasil（葡萄牙文 - 巴西）</li>
							<li>Română（羅馬尼亞文）</li>
							<li>Русский（俄文）</li>
							<li>Suomi（芬蘭文）</li>
							<li>Svenska（瑞典文）</li>
							<li>Türkçe（土耳其文）</li>
							<li>tiếng Việt（越南文）</li>
							<li>Українська（烏克蘭文）</li>
						</ol>
					</li>
					<li><a href="">登录 |</a></li>
				</ul>
			</div>
		</div>	
	</div>
	<div id="logo1">
		<div class="center">
			<div class="box">
				<ul id="case">
					<li id="shopp">
						<a href="#" id="shoping">您的商店</a>
						<span class="sarrow-bottom"></span>
						<ol id="down">
							<li class="page"><a href="#">商店主页</a></li>
							<div class="div"></div>
							<li class="page1"><a href="#">最近查看过的</a></li>
							<li><a href="#">Steam鉴赏家</a></li>
							<li><a href="#">最近更新</a></li>
						</ol>
					</li>
					<li id="shopp">
						<a href="#" id="game">游戏</a>
						<span class="sarrow-bottom"></span>
						<ol>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ol>
					</li>
					<li id="shopp">
						<a href="#">软件</a>
						<span class="sarrow-bottom"></span>
					</li>
					<li id="shopp">
						<a href="#">硬件</a>
						<span class="sarrow-bottom"></span>
					</li>
					<li id="shopp">
						<a href="#">新闻</a>
					</li>
					<li id="shopp">
						<a href="#">Steam实验室</a>
					</li>
					<input type="" name="" id="input"   placeholder="搜索商店">
					<img src="btn.png"  id="btn">

				</ul>
			</div>	
		</div>
	</div>
	<div class="main">
		<div class="center">
			<div class="adv">
				<h2>精选和推荐</h2>
				<div class="list">
					<ul class="ull">
						<li id="copy">
							<a href="#" class="alist">
								<div class="left">
									<img src="" class="bigimg"> 
								</div>
								<div class="right">
									<h2 class="gameName"></h2>
									<div class="imglist">
										<img src="">
										<img src="">
										<img src="">
										<img src="">
									</div>
									<h3>现已推出</h3>
									<p class="money">
										<span class="discount"></span>
										<span class="original"></span>
										<span class="Present"></span>
									</p>
								</div>
								<div class="images">
									<img src="" class="win">
									<img src="" class="linux">
									<img src="" class="mac">
									<img src="" class="htc">
									<img src="" class="cocu">
								</div>
								<div class="gamehover">
									<div class="gamestart">
										<h2 class="hh2"></h2>
										<p>发行于: <span class="time"></span></p>
										<img src="" class="IMG">
										<div class="gameover">
											<ul class="fail">
												<li>用户总体评测：</li>
												<li><span class="good"></span><span class="good2"></span><span>篇评测)</span></li>
											</ul>
											<p>用户标签：</p>
											<ul class="ucba">

											</ul>
										</div>
										<div class="arrow-left"></div>
									</div>
								</div>
							</a>
						</li>
					</ul>
						
					<div class="prev"><div></div></div>
					<div class="next"><div></div></div>
					<ul class="dot" >
						<li class="dotlist" id="dotli"></li>
						<!-- <li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li> -->
					</ul>

				<div  id="promo">
					<img src="promo.png" >
					<ul id="card">
						<li class="symbol">礼物卡</li>
						<li><a href="#">现已在 steam 上推出</a></li>
						<li class="symbol">推荐</li>
						<li><a href="#" class="aa"><div id="aa1"></div>由好友推荐</a></li>
						<li><a href="#" class="aa"><div id="aa2"></div>由鉴赏家推荐</a></li>
						<li><a href="#" class="aa"><div id="aa3"></div>标签</a></li>
						<li class="symbol">探索队列</li>
						<li><a href="#" class="aa"><div id="aa4"></div>推荐</a></li>
						<li><a href="#" class="aa"><div id="aa5"></div>新品</a></li>
						<li class="symbol">浏览分类</li>
						<li><a href="#" class="aa"><div id="aa6"></div>热销商品</a></li>
						<li><a href="#" class="aa"><div id="aa7"></div>最近更新</a></li>
						<li><a href="#" class="aa"><div id="aa8"></div>新品</a></li>
						<li><a href="#" class="aa"><div id="aa9"></div>即将推出</a></li>
						<li><a href="#" class="aa"><div id="aa10"></div>优惠</a></li>
						<li><a href="#" class="aa"><div id="aa11"></div>虚拟现实</a></li>
						<li><a href="#" class="aa"><div id="aa12"></div>支持 Steam 控制器</a></li>
						<li class="symbol">按类型浏览</li>
						<li><a href="#">免费游玩</a></li>
						<li><a href="#">抢先体验</a></li>
						<li><a href="#">休闲</a></li>
						<li><a href="#">体育</a></li>
						<li><a href="#">冒险</a></li>
						<li><a href="#">动作</a></li>
						<li><a href="#">大型多人在线</a></li>
						<li><a href="#">模拟</a></li>
						<li><a href="#">独立</a></li>
						<li><a href="#">竞速</a></li>
						<li><a href="#">策略</a></li>
						<li><a href="#">角色扮演</a></li>
						<li class="symbol"  id="symo">浏览记录</li>
						<li class="notice"><a href="#"></a></li>
					</ul>
			</div>
		</div>
	</div>

	
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		function addCommas(nStr){
			nStr += '';
			x = nStr.split('.');
			x1 = x[0];
			x2 = x.length > 1 ? '.' + x[1] : '';
			var rgx = /(\d+)(\d{3})/;
			while (rgx.test(x1)) {
				x1 = x1.replace(rgx, '$1' + ',' + '$2');
			}
			return x1 + x2;
		}

		$(function(){
			//显示语言
			$("#lang").click(function(){
				$("#ol3").fadeToggle()
			})

			$.ajax({
				url:"http://wangdawei.tech:81/history?",
				dataType:"jsonp",
				success:function(data){
					var copy = $("#copy")
					var ull = $(".ull")
					
					for(var i = 0; i < data.length ; i++){

						var templete = copy.clone(true)
						templete.appendTo(ull)
						templete.attr("id","")
						templete.attr("class","team")

						//cover大图
						var cover = data[i].imgUrl[0];
						templete.find(".bigimg").attr("src",cover)
						templete.find(".gameName").html(data[i].name)

						//cover小图
						var urlList = data[i].imgUrl;
						var imgList = templete.find(".imglist img")

						for(var j = 0; j < urlList.length; j++){
							imgList.eq(j).attr("src",urlList[j])
						}




						// 游戏说明数据
						templete.find(".gamehover .hh2").html(data[i].name);
						templete.find(".gamehover .time").html(data[i].date.replace("-","年").replace("-","月") + "日")
						if(data[i].evaluate === 1){
							templete.find(".good").html("好评如潮")
						}
						if(data[i].evaluate === 2){
							templete.find(".good").html("特别好评")
						}
						if(data[i].evaluate === 3){
							templete.find(".good").html("多半好评")
						}
						if(data[i].evaluate === 4){
							templete.find(".good").html("褒贬不一")
						}
						if(data[i].evaluate === 5){
							templete.find(".good").html("多半差评")
						}
						if(data[i].evaluate === 6){
							templete.find(".good").html("差评如潮")
						}
						if(data[i].evaluate === 7){
							templete.find(".good").html("无评论")
						}
						for(x = 0; x < data[i].label.length; x++){
							$("<li></li>").html(data[i].label[x]).appendTo(templete.find(".ucba")) 
						}
						templete.find(".good2").html("(" + addCommas(data[i].evaluatingCount));
					



						//价格
						if(data[i].isSale){
							templete.find(".discount").html("-" + (data[i].discount*100) + "%")
							templete.find(".original").html("￥" + data[i].originPrice)
						}
							templete.find(".Present").html("￥" + data[i].price)


						//寻找游戏Id
						templete.find(".alist").attr("href",data[i].url).attr("datagameId",data[i].gameId)
						


						
	
						

						//平台选择
						for(var f = 0; f < data[i].platform.length; f++){
							if(data[i].platform[f] == "Windows"){
								templete.find(".win").attr("src","wina.png").toggle()
							}
							if(data[i].platform[f] == "Steam"){
								templete.find(".linux").attr("src","linuxa.png").toggle()
							}
							if(data[i].platform[f] == "Mac OS"){
								templete.find(".mac").attr("src","maca.png").toggle()
							}
							if(data[i].platform[f] == "HTCvive"){
								templete.find(".htc").attr("src","htc1.png").toggle()
							}
							if(data[i].platform[f] == "Oculusrift"){
								templete.find(".cocu").attr("src","oculus.png").toggle()
							}
						}
					}
						



						var n = $(".team").length
						//初始化小圆点
						for(var k = 0; k < n; k++){

							dotlist = $(".dotlist").clone(true);
							dotlist.appendTo($(".dot"));
							$(".dotlist").attr("id","")
							dotlist.attr("id","")
							dotlist.attr("class","color")
							$(".color").eq(0).attr("id","dotli")
						}
						$(".color").click(function(){
							m = $(this).index()-1
							$(".ull > li").hide()
							$(".team").eq(m).fadeIn()
							$(".color").attr("id","")
							$(".color").eq(m).attr("id","dotli")
						})
							
							
					
						//点击向右箭tou
						var m = 0;
						
						$(".team").eq(0).fadeIn()
						$(".next").click(function(){
							$(".ull > li").hide()
							if(m < n-1){
								m++;
								$(".team").eq(m).fadeIn()
								$(".color").attr("id","")
								$(".color").eq(m).attr("id","dotli")
							}
							else{
								m = 0;
								$(".team").eq(0).fadeIn()
								$(".color").eq(n-1).attr("id","")
								$(".color").eq(0).attr("id","dotli")
							}
						})
						//点击向左键tou
						$(".prev").click(function(){
							
							$(".ull > li").hide()
							if(m == 0){
								$(".team").eq(n-1).fadeIn()
								$(".color").eq(0).attr("id","")
								$(".color").eq(n-1).attr("id","dotli")
								m = n-1
							}
							else{
								m--;
								$(".team").eq(m).fadeIn()
								$(".color").attr("id","")
								$(".color").eq(m).attr("id","dotli")
							}
						})
						

						//图片切换
						$(".imglist img").mouseenter(function(){
							$(this).closest(".team").find(".bigimg").attr("src",$(this).attr("src"))
						})
						$(".imglist img").mouseleave(function(){

							$(this).closest(".team").find(".bigimg").attr("src",$(this).closest(".team").find(".imglist img").eq(0).attr("src"))
						})




						
						if(localStorage.getItem("gameId")){
							$.ajax({
								url:"http://wangdawei.tech:81/history",
								data:{
									gameId:localStorage.getItem("gameId")
								},
								dataType:"jsonp",
								success:function(data){
									for( var i = 0; i < data.length ; i++){
										$(".notice").find("a").html(data[i].name)
										$(".notice").find("a").attr(data[i].url)

										var  not= $(".notice").clone(true)
										not.appendTo($("#card"))
										not.attr("class","history")
									}
								}
							})
						}
						else{
							$("#symo").fadeOut()
						}


						//寻找ID

						$(".alist").click(function(){
							var gameid = localStorage.getItem("gameId");
							var s = $(this).attr("datagameId")													
							if(gameid){
								var Length = gameid.split(",")
								for(var w = 0 ; w < Length.length ; w++){
									if(Length[w] === s){
										return ;
									}
								}
								localStorage.setItem("gameId",gameid+","+$(this).attr("datagameId"))
							}
							else{
								localStorage.setItem("gameId",$(this).attr("datagameId"))
							}
						})
						





						//鼠标移上右边显示
						$(".ull  .team").mouseenter(function(){
							var liimg = $(this).find(".gamehover .IMG")
							liimg.attr("src",$(this).find(".imglist img").eq(0).attr("src"))
							var thiss = this;
							$(this).find(".gamehover").fadeIn() 
							var p = 0;
							ss = setInterval(function(){
								p++;
								if(p == 4){
									p = 0;
								}
								liimg.attr("src",$(thiss).find(".imglist img").eq(p).attr("src"))
							},1000)		
						})
						$(".ull .team").mouseleave(function(){
							$(this).find(".gamehover").fadeOut();
							clearInterval(ss)
						})
				}
			})		
		})
		

	</script>
</body>
</html>

